<template>
	<view class="">
		<Header title="同类题目" :isHome="true" :isWhite='true'></Header>

		<view class="">

			<view class="main" v-for="(item,index) in subjectList" :key="index">

				<span class="title" v-if="item.topic">{{index+1}}、{{item.topic}}<!-- ({{item.score}}分) --></span>
				<span class="typeLogo" v-if="item.answer_type=='FILL'">
					填空题
				</span>
				<span class="typeLogo" v-if="item.answer_type=='JUDGE'">
					判断题
				</span>
				<span class="typeLogo" v-if="item.answer_type=='ONE'">
					单选
				</span>
				<span class="typeLogo" v-if="item.answer_type=='MANY'">
					多选
				</span>

				<!-- 填空选项 -->
				<span class="title" v-if="item.answer_type=='FILL'"
					style="margin-right: 10rpx; margin-top: 40rpx;display: flex;align-items: center;">请输入您的答案： <input
						type="text" v-model="fillAnswer[index]"
						style="width: 50%;border-bottom: 1px solid #000;padding: 0 20rpx;" /> </span>
				<view class="submitBtn" v-if="item.answer_type=='FILL'" @click="submitAnswer(index)">
					提交答案
				</view>

				<view class="" v-if="item.images" v-for="i in item.images">
					<image :src="imgUrl+i" mode="" class="bookImg"></image>
				</view>

				<!-- 多选 -->
				<view v-if="item.answer_type === 'MANY'">
					<view :class="isSelectedMany(index,inx)?'chapter-active':'chapter'" v-for="(itm,inx) in item.option"
						:key="inx">
						<view class="flex" @click="chooseAnswerMany(item,index,inx)">
							<view class="">
								{{inx}}.{{itm}}
							</view>
							<image src="/static/three.png" mode="" class="three"></image>
						</view>
					</view>
					<view class="submitBtn" @click="submitAnswer(index)">
						提交答案
					</view>
				</view>
				<!-- 单选 -->
				<view v-else>
					<view :class="isSelectedOne(index,inx)?'chapter-active':'chapter'" v-for="(itm,inx) in item.option"
						:key="inx">
						<view class="flex" @click="chooseAnswer(item,index,inx)">
							<view class="">
								{{inx}}.{{itm}}
							</view>
							<image src="/static/three.png" mode="" class="three"></image>
						</view>
					</view>
				</view>

				<view class="" v-if="show[index]">
					<view class="all">
						<view class="answer">
							<view class="">
								<view class="rightAnswer">
									正确答案：<span v-if="item.answer_type=='MANY'">{{JSON.parse(item.answer).join(',')}}</span>
									<span v-else>{{item.answer}}</span>
								</view>
								<view :class="isTrue[index] == 1?'selectedAnswerRight':'selectedAnswerWrong'">
									已选答案：<span v-if="item.answer_type=='MANY'">{{selectedAnswers[index]}}</span>
									<span v-else-if="item.answer_type=='FILL'">{{fillAnswer[index]}}</span>
									<span v-else>{{selectedAnswer[index]}}</span>
								</view>
							</view>
							<view class="" v-if="isTrue[index] == 1">
								<image src="/static/right.png" mode="" class="wrong"></image>
							</view>
							<view class="" v-if="isTrue[index] == 2">
								<image src="/static/wrong.png" mode="" class="wrong"></image>
							</view>
						</view>
					</view>
					<!-- <view class="" v-if="isTrue[index] == 2">
						<view class="jeixititle">
							题目解析
						</view>
						<view class="content">
							这句诗不完全正确。正确的诗句应该是:“床前明月光，疑是地上霜。举头望明月，低头思故乡。”这首诗出自唐代诗人李白的《静夜思》
						</view>
						<image src="" mode="" class="station"></image>
					</view> -->
				</view>

			</view>


		</view>
	</view>
</template>

<script>
	import {
		get,
		img_url,
		post
	} from '../../utils/request';
	export default {
		data() {
			return {
				imgUrl: img_url,
				id: '',
				countdownSeconds: 30,
				countSeconds: 5,
				show: [],
				showSuccess: false,
				count: 0,
				totalCount: 4,
				selectedOptions: {},
				optionSelected: {},
				fillAnswer:[],
				selectedAnswer: [],
				selectedAnswers: [],
				isTrue: [],
				numList: [{
						num: 1,
					},
					{
						num: 2,
					},
					{
						num: 3,
					},
					{
						num: 4,
					},
					{
						num: 5,
					},
					{
						num: 6,
					},
					{
						num: 7,
					},
					{
						num: 8,
					},
					{
						num: 9,
					},
					{
						num: '.',
					},
					{
						num: 0,
					},
					{
						num: 'X',
					}
				],
				subjectList: [{
						id: 1,
						title: '1、汽车的单词=？',
						score: '10',
						type: '2', //填空题
						optionList: [{
								id: 11,
								title: 'car'
							},
							{
								id: 12,
								title: 'what'
							},
							{
								id: 13,
								title: 'cat'
							}
						]
					},
					{
						id: 1,
						title: '2、疑是地上霜，举头望明月，低头思故乡。这个诗句是否正确!',
						score: '10',
						type: '2', //判断题
						optionList: [{
								id: 14,
								title: 'A.正确'
							},
							{
								id: 15,
								title: 'B.错误'
							},

						]
					},
					{
						id: 1,
						title: '3、床前明月光，疑是地上霜，举头望明月，低头思故乡。床的意思是指?',
						score: '10',
						type: '3', //选择题
						optionList: [{
								id: 16,
								title: 'A.李白的睡床'
							},
							{
								id: 17,
								title: 'B.放墨宝的书案'
							},
							{
								id: 18,
								title: 'C.井台上的围栏'
							},
							{
								id: 19,
								title: 'D.普通的木床'
							},

						],

					},
					{
						id: 1,
						title: '4、你想告诉同学这不是你的小汽车你可以说?',
						score: '10',
						type: '3', //选择题
						optionList: [{
								id: 1,
								title: 'A.This is a car.'
							},
							{
								id: 2,
								title: 'B.Ls that my car?'
							},
							{
								id: 3,
								title: 'C.This isn’t my car.'
							},


						],

					},
				]
			}
		},
		onLoad(options) {
			this.startCountdown()
			console.log(options, '111');
			this.id = options.id
			this.getPaperInfo()
			if (options.type == 'math') {
				this.showMath = true
			}
			for (let i = 0; i < this.subjectList.length; i++) {
				this.selectedAnswers.push([]);
			}
		},
		methods: {
			getPaperInfo() {
				get('/paper/cases?questions_id=' + this.id).then(res => {
						this.subjectList = res.data
						if(this.subjectList.length==0){
							uni.showToast({
								title:'暂无相关仿题',
								icon:'error'
							})
							setTimeout(function(){
								uni.navigateBack()
							},1000)
						}
					})
					.catch(err => {
						console.error('GET 请求失败:', err);
					});
			},
			// 检查单选是否选中
			isSelectedOne(index, optionIndex) {
				return this.selectedAnswer[index] === optionIndex;
			},
			// 检查多选是否选中
			isSelectedMany(index, optionIndex) {
				return this.selectedAnswers[index] && this.selectedAnswers[index].includes(optionIndex);
				// return this.selectedAnswers[index].includes(optionIndex);
			},
			// 单选
			chooseAnswer(itm, index, idx) {
				this.selectedAnswer[index] = idx;
				this.$forceUpdate();
				if (Array.isArray(idx)) {
					var q_answer = JSON.parse(itm.answer)
				} else {
					var q_answer = itm.answer
				}
				post('/paper/submit_paper', {
						q_answer: q_answer,
						answer: idx,
						answer_type: itm.answer_type
					}).then(res => {
						this.isTrue[index] = res.data
						this.show[index] = true
					})
					.catch(err => {
						console.error('GET 请求失败:', err);
					});
			},
			// 多选
			chooseAnswerMany(item, idx, index) {
				if (!this.selectedAnswers[idx]) {
					this.selectedAnswers[idx] = [];
				}
				const indexInSelected = this.selectedAnswers[idx].indexOf(index);
				if (indexInSelected > -1) {
					// 已选中，取消选择
					this.selectedAnswers[idx].splice(indexInSelected, 1);
				} else {
					// 未选中，添加选择
					this.selectedAnswers[idx].push(index);
				}
				this.$forceUpdate();
			},

			// 填空 和 多选
			submitAnswer(index) {
				if (this.subjectList[index].answer_type == "FILL") {
					var answer = this.fillAnswer[index]
					var q_answer = this.subjectList[index].answer
				} else {
					var answer = this.selectedAnswers[index]
					var q_answer = JSON.parse(this.subjectList[index].answer)
				}
				this.$forceUpdate();
				// var q_answer = JSON.parse(this.subjectList[index].answer)
				post('/paper/submit_paper', {
						q_answer: q_answer,
						answer: answer,
						answer_type: this.subjectList[index].answer_type
					}).then(res => {
						if (res.code == 1) {
							this.isTrue[index] = res.data
							this.show[index] = true
						}
					})
					.catch(err => {
						console.error('GET 请求失败:', err);
					});
			},
			next() {
				const count = this.count + 1
				if (count != this.totalCount) {
					this.count++
				}
			},
			previous() {
				if (this.count > 0) {
					this.count--
					if (this.selectedOptions[this.count] !== undefined) {
						this.$nextTick(() => {});
					}
				}
			},
			radioChange(e) {
				console.log(e, 'eee');
			},
			submit() {
				uni.navigateTo({
					url: '/subpages/banner/practiceResult'
				})
			},
			startCountdown() {
				const timer = setInterval(() => {
					if (this.countdownSeconds > 0) {
						this.countdownSeconds--;
					} else {
						clearInterval(timer);
					}
				}, 1000);
			},
			startCount() {
				const timer = setInterval(() => {
					if (this.countSeconds > 0) {
						this.countSeconds--;
					} else {
						clearInterval(timer);
					}
				}, 1000);
			},
			// chooseAnswer(id) {
			// 	const inx = this.subjectList[this.count].optionList.findIndex(item => item.id === id);
			// 	if (inx !== -1) {
			// 		this.optionSelected[inx] = true;

			// 		if (this.count < this.totalCount) {
			// 			this.count++;
			// 		}
			// 		if (this.count == this.totalCount) {
			// 			this.show = true
			// 		}

			// 	}
			// },
			goBack() {
				uni.navigateBack()
			}

		}
	}
</script>

<style lang="scss" scoped>
	.boardAll {
		width: 196rpx;
		height: 64rpx;
		background: #F5F5F5;
		border: 1rpx solid #DDDDDD;
		border-radius: 32rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-family: PingFangSC-SNaNrpxibold;
		font-weight: 600;
		font-size: 24rpx;
		color: #222222;
		margin: 20rpx auto;

		view {
			margin-right: 10rpx;
		}

		.board {
			width: 36rpx;
			height: 36rpx;
			display: block;
			margin-right: 20rpx;
		}

		.toright {
			width: 24rpx;
			height: 24rpx;
			display: block;
		}
	}

	.popContent {
		width: 630rpx;
		height: 774rpx;
		border-radius: 24rpx;
		text-align: center;
		position: relative;

		.popCon {
			font-family: PingFangSC-Regular;
			font-weight: 400;
			font-size: 26rpx;
			color: #555555;
			margin: 20rpx 0;
		}

		.close {
			position: absolute;
			width: 72rpx;
			height: 72rpx;
			bottom: -100rpx;
			left: 280rpx;
		}

		.title {
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 36rpx;
			color: #1A1A1A;
			margin: 50rpx 0;

		}


		.qr {
			width: 524rpx;
			height: 222rpx;
			margin-top: 50rpx;
		}

		.allBtn {
			display: flex;
			justify-content: center;
			margin-top: 60rpx;

			view {
				width: 239rpx;
				height: 96rpx;
				border-radius: 48rpx;
				text-align: center;
				line-height: 96rpx;
			}

			.fanhui {
				margin-right: 20rpx;
				background: #FFFFFF;
				border: 2rpx solid #1A1A1A;
			}

			.continue {
				background: #FFD275;
			}
		}
	}

	.chapterAll {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.chapterMath {
		width: 212rpx;
		text-align: center;
		background: #FFFFFF;
		border: 3rpx solid #222222;
		border-radius: 12rpx;
		position: relative;
		margin: 20rpx auto;
		padding: 28rpx;
		box-sizing: border-box;
		font-family: PingFangSC-SNaNrpxibold;
		font-weight: 600;
		font-size: 28rpx;
		color: #222222;


	}

	.chapter {
		width: 686rpx;
		text-align: center;
		background: #FFFFFF;
		border: 3rpx solid #222222;
		border-radius: 12rpx;
		position: relative;
		margin: 20rpx auto;
		padding: 28rpx;
		box-sizing: border-box;
		font-family: PingFangSC-SNaNrpxibold;
		font-weight: 600;
		font-size: 28rpx;
		color: #222222;


	}


	.one {
		width: 21rpx;
		height: 34rpx;
		position: absolute;
		top: -12rpx;
		right: 21rpx;
	}

	.chapter-active {
		width: 686rpx;
		text-align: center;
		background: #ffebc2;
		border: 3rpx solid #222222;
		border-radius: 12rpx;
		position: relative;
		margin: 20rpx auto;
		padding: 28rpx;
		box-sizing: border-box;
		font-family: PingFangSC-SNaNrpxibold;
		font-weight: 600;
		font-size: 28rpx;
		color: #222222;
	}




	.topOn {
		display: flex;
		justify-content: space-between;
		padding: 40rpx 32rpx;
		background-color: #fff;
		position: sticky;

		.schedule {
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 28rpx;
			color: #222222;
			margin-right: 20rpx;
		}

		.count {
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 36rpx;
			color: #222222;
		}

		.totalCount {
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 28rpx;
			color: #222222;
		}

		.countdownTitle {
			font-family: PingFangSC-Regular;
			font-weight: 400;
			font-size: 28rpx;
			color: #222222;
			margin-right: 20rpx;
		}

		.countdownSeconds {
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 36rpx;
			color: #F54040;
		}
	}

	.main {
		padding: 30rpx;

		.uni-list-cell {
			position: relative;
			display: flex;
			align-items: center;
			padding: 20rpx;
			border: 3rpx solid #222;
			border-radius: 12rpx;
			margin: 40rpx 0;
			background-color: #fff;
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 28rpx;
			color: #222222;
		}

		.typeLogo {
			background-image: linear-gradient(90deg, #FAE17D 0%, #FFD275 100%);
			border-radius: 4rpx;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			font-size: 22rpx;
			color: #222222;
			padding: 5rpx 10rpx;
			margin-right: 20rpx;
		}

		.title {
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 30rpx;
			color: #222222;
			margin-right: 20rpx;
		}

		.three {
			width: 66rpx;
			height: 34rpx;
			position: absolute;
			top: -12rpx;
			right: 54rpx;
		}
	}

	.textbook {
		width: 686rpx;
		height: 300rpx;
		margin: 20rpx auto 0;
	}

	.submitBtn {
		width: 510rpx;
		height: 96rpx;
		background: #FFD275;
		border-radius: 48rpx;
		font-family: PingFangSC-SNaNrpxibold;
		font-weight: 600;
		font-size: 32rpx;
		color: #1A1A1A;
		text-align: center;
		line-height: 96rpx;
		margin: 20rpx auto;
	}

	.bottom {
		position: fixed;
		width: 100%;
		// height: 188rpx;
		padding-bottom: 50rpx;
		bottom: 0;
		background-color: #fff;
		font-family: PingFangSC-SNaNrpxibold;
		font-weight: 600;
		font-size: 26rpx;
		color: #222222;

		.submitBtn {
			width: 510rpx;
			height: 96rpx;
			background: #FFD275;
			border-radius: 48rpx;
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 32rpx;
			color: #1A1A1A;
			text-align: center;
			line-height: 96rpx;
			margin: 0 auto;
		}

		.bottom-info {
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin: 35rpx 0;
			box-sizing: border-box;

			.count {
				color: #222222;
				font-size: 26rpx;
				font-family: PingFangSC;
				font-weight: 600;
				line-height: 36rpx;
			}

			.totalCount {
				color: #999999;
				font-size: 26rpx;
				font-family: PingFangSC;
				font-weight: 400;
			}

			.changeBtn {
				width: 130rpx;
				height: 56rpx;
				text-align: center;
				line-height: 56rpx;
				margin-right: 20rpx;
				border: 2rpx solid #222222;
				border-radius: 8rpx;
			}

			.changeBtndis {
				width: 130rpx;
				height: 56rpx;
				text-align: center;
				line-height: 56rpx;
				margin-right: 20rpx;
				border: 2rpx solid #ccc;
				border-radius: 8rpx;
				font-family: PingFangSC-Regular;
				font-weight: 400;
				font-size: 26rpx;
				color: #CCCCCC;
			}
		}

		.bottom-flex {
			display: flex;
		}
	}

	.all {
		width: 686rpx;
		background: #F0F0F0;
		padding: 28rpx;
		box-sizing: border-box;
		border-radius: 12rpx;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 28rpx;
		color: #222222;
		margin: 20rpx auto;

		.allBtn {
			display: flex;
			justify-content: flex-end;
			padding: 20rpx 0;
			border-top: 1rpx solid #ccc;
			margin-top: 20rpx;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			font-size: 26rpx;
			color: #1A1A1A;

			view {
				width: 144rpx;
				height: 56rpx;
				border-radius: 6rpx;
				text-align: center;
				line-height: 56rpx;
			}

			.case {
				border: 2rpx solid #1A1A1A;
			}

			.analysis {
				margin-left: 20rpx;
				background: #FFD275;

			}
		}
	}

	.answer {

		display: flex;
		align-items: center;
		justify-content: space-between;

		.wrong {
			width: 100rpx;
			height: 100rpx;
		}

		.rightAnswer {
			margin-bottom: 12rpx;

			span {
				font-family: PingFangSC-SNaNrpxibold;
				font-weight: 600;
				font-size: 28rpx;
				color: #222222;
			}
		}

		.selectedAnswerRight {
			margin-bottom: 12rpx;

			span {
				font-family: PingFangSC-SNaNrpxibold;
				font-weight: 600;
				font-size: 28rpx;
				color: #38BD69;
			}
		}

		.selectedAnswerWrong {
			margin-bottom: 12rpx;

			span {
				font-family: PingFangSC-SNaNrpxibold;
				font-weight: 600;
				font-size: 28rpx;
				color: #F54040;
			}
		}
	}
</style>